<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body { margin: 0; }
		</style>
		<script src="../utils/setTitle.js"></script>
	</head>
	<body>
		<script type="importmap">
			{
				"imports": {
					"three": "https://unpkg.com/three/build/three.module.js"
				}
			}
		</script>
		<script type="module">
			import * as THREE from 'three';
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			class CustomLineCurve extends THREE.Curve {
				constructor(start,end) {
					super();
					this.v1 = start;
					this.v2 = end;
				}
				getPoint( t, optionalTarget = new THREE.Vector2()) {
					const point = optionalTarget;
					if ( t === 1 ) {
						point.copy( this.v2 );
					} else {
						point.copy( this.v2 ).sub( this.v1 );
						point.multiplyScalar( t ).add( this.v1 );
					}
					return point;
				}
			}

			var startPoint = new THREE.Vector2(-10, 0);
			var endPoint = new THREE.Vector2(10, 0);
			// 创建自定义线曲线
			var curve = new CustomLineCurve(startPoint, endPoint);

			// 创建曲线路径
			var path = new THREE.Path(curve.getPoints(50));

			var points = path.getPoints();
			// 创建几何体
			var positions = [];
			var indices = [];

			// 将顶点坐标添加到顶点数组
			for (var i = 0; i < points.length; i++) {
			positions.push(points[i].x, points[i].y, 0);
			}

			// 添加顶点索引
			for (var i = 0; i < points.length - 1; i++) {
			indices.push(i, i + 1);
			}

			// 创建BufferGeometry
			var geometry = new THREE.BufferGeometry();

			// 设置顶点位置
			geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

			// 设置顶点索引
			geometry.setIndex(indices);
			var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
			var line = new THREE.Line(geometry, material);

			// 将曲线添加到场景中
			scene.add(line);
			camera.position.z = 45;
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			function animate() {
				requestAnimationFrame( animate );
				line.rotation.x += 0.01;
				line.rotation.y += 0.01;
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.render( scene, camera );
			}
			animate();
		</script>
	</body>
</html>